<template>
	<view class="repair">
		<view class="repair-tabs">
			<u-tabs :list="repairTabs" @change="repairTabChange" v-model="current" inactive-color="#4f5050"
				class="tab-content" height="40" bar-width="150" item-width="350" bar-height="8" font-size="32"
				bg-color="#f1f1f1" :bar-style="{'bottom': '-8rpx'}"></u-tabs>
		</view>
		<view class="repair-content">
			<scroll-view scroll-y class="repair-list"
				@scrolltolower="downGetList" refresher-enabled="true" :refresher-triggered="isTriggered"  @refresherrefresh="topGetList" >
				<view v-if="current == 1 ?  lists && JSON.parse(JSON.stringify(lists)).length > 0:lists2 && JSON.parse(JSON.stringify(lists2)).length > 0">
					<view class="repair-item"  
					v-for="(item, index) in (current == 1 ? lists : lists2)" @click="goRepairDetail(item)">
					<view class="repair-item_cell u-flex">
						<view class="u-flex-1">
							<text class="repair-item_cell--label">{{$t('project.ship_name')}}：</text>
							<text class="repair-item_cell--value">{{item.ShipName}}</text>
						</view>
						<view class="repair-item_cell--state">
							<text class="icon icon-lunchuan"></text>
							{{$t('project.prject_stats.'+ item.Stat)}}
						</view>
					</view>
					<view class="repair-item_cell"
						v-if="item.StatText == '收到修理单' || item.StatText == '报价' || item.StatText == '合同洽谈' || item.StatText == '合同签订' || item.StatText == '修理终止' || item.StatText == '确定修理'">
						<text class="repair-item_cell--label">{{$t('project.pre_fix_date')}}：</text>
						<text
							class="repair-item_cell--value">{{item.PreFixDateText != '' ? item.PreFixDateText : '-'}}</text>
					</view>
					<view class="repair-item_cell"
						v-if="(item.StatText == '合同签订' || item.StatText == '产前策划' || item.StatText == '进厂') && item.PermissionPrice == 1">
						<text class="repair-item_cell--label">{{$t('project.contract_price')}}：</text>
						<text class="repair-item_cell--value">{{item.ContractFee != '' ? item.ContractFee : '-'}}</text>
					</view>
					<view class="repair-item_cell"
						v-if="item.StatText == '合同签订' || item.StatText == '产前策划' || item.StatText == '进厂'">
						<text class="repair-item_cell--label">{{$t('project.contract_period')}}：</text>
						<text
							class="repair-item_cell--value">{{item.ContractPeriod != '' ? item.ContractPeriod : '-'}}</text>
					</view>
					<view class="repair-item_cell"
						v-if="item.StatText == '进厂' || item.StatText == '进坞' || item.StatText == '再次进坞' || item.StatText == '出坞' || item.StatText == '再次出坞' || item.StatText == '开工'|| item.StatText == '完工' || item.StatText == '开航'">
						<text class="repair-item_cell--label">{{$t('project.project_price_row')}}：</text>
						<text class="repair-item_cell--value">{{
					  item.PriceRow != "" ? item.PriceRow : "-"
					}}</text>
					</view>
					<view class="repair-item_cell"
						v-if="(item.StatText == '合同洽谈' || item.StatText == '报价' || item.StatText == '开工' || item.StatText == '进坞' || item.StatText == '再次进坞' || item.StatText == '出坞' || item.StatText == '再次出坞' || item.StatText == '完工') && item.PermissionPrice == 1 && item.PermissionContract == 1">
						<text class="repair-item_cell--label">{{$t('project.pre_fix_amount')}}：</text>
						<text class="repair-item_cell--value">
							{{ item.CurrentAmountText != "" ? (item.Discount == 0 ? item.CurrentAmountText : (parseFloat(item.CurrentAmountText.replace(/[,]/g,""))*(100-item.Discount)/100)) : "-" }}</text>
					</view>
					<view class="repair-item_cell" v-if="item.StatText == '合同洽谈' || item.StatText == '报价'">
						<text class="repair-item_cell--label">{{$t('project.pre_fix_period')}}：</text>
						<text class="repair-item_cell--value">{{item.PreFixPeriod != '' ? item.PreFixPeriod : '-'}}</text>
					</view>
					<view class="repair-item_cell"
						v-if="item.StatText == '开工' || item.StatText == '进坞' || item.StatText == '再次进坞' || item.StatText == '出坞' || item.StatText == '再次出坞' || item.StatText == '完工'">
						<text class="repair-item_cell--label">{{$t('project.pre_done_date')}}：</text>
						<text
							class="repair-item_cell--value">{{item.PreDoneDateText != '' ? item.PreDoneDateText : '-'}}</text>
					</view>
					<view class="repair-item_cell" v-if="item.StatText == '开航'">
						<text class="repair-item_cell--label">{{$t('project.done_date')}}：</text>
						<text class="repair-item_cell--value">{{item.EndDateText != '' ? item.EndDateText : '-'}}</text>
					</view>
					<view class="repair-item_cell"
						v-if="item.StatText == '产前策划' || item.StatText == '进厂'|| item.StatText == '开工' || item.StatText == '进坞' || item.StatText == '再次进坞' || item.StatText == '出坞' || item.StatText == '再次出坞' || item.StatText == '完工' || item.StatText == '开航'">
						<text class="repair-item_cell--label">{{$t('project.fix_yard')}}：</text>
						<text class="repair-item_cell--value">{{lang == '中文' ? item.ShipYard : item.ShipYardEn}}</text>
					</view>
					<view class="repair-item_cell" v-if="item.SettleAmountText == 0 ">
						<u-icon class="repair-item_cell--label" name="info-circle"></u-icon>
						<text class="repair-item_cell--value"
							style="color:#999999;font-size:26rpx;margin-left:10rpx;">{{$t('project.project_desc')}}</text>
					</view>
				</view>
				<u-loadmore :status="current == 1 ? loadStatus :loadStatus2" :icon-type="iconType" :load-text="loadText" margin-bottom="45"
					margin-top="45" color="#C1C0C0" />
	      </view>			
				<u-empty :text="$t('project.empty_txt')" mode="list" v-else class="empty-view"></u-empty>
			</scroll-view>
		</view>
		
		
	</view>
</template>

<script>
	import pageMixin from '@/utils/pageMixin';
	import {
		toRaw
	} from 'vue';
	import homeStorage from "@/utils/storage.js";
	export default {
		mixins: [pageMixin],
		data() {
			return {
				lists: [],
				lists2:[],
				iconType: 'flower',
				lang: '',
				loadStatus: 'loading',
				loadStatus2:'loading',
				query: {
					clientType: 1,
					clientRepairType: 2,
					idx: 1,
					size: 10,
					topTime:0,
				},
				query2: {
					clientType: 1,
					clientRepairType: 1,
					idx: 1,
					size: 10,
					topTime:0,
				},
				loadText: {
					loadmore: this.$t('project.pull_up'),
					loading: this.$t('project.loading'),
					nomore: this.$t('project.note_no_more'),
				},
				current: 1,
				lastListSize:0,
				isTriggered : false,
			}
		},
		onLoad() {
			this.$store.commit('checkUserLogin');
			this.lang = uni.getStorageSync('lang') || '';
			this.loadStatus = 'loading';
			this.getList(true);
		},
		onShow() {
			this.lang = uni.getStorageSync('lang') || '';
			this.query.idx = 1;
			// this.loadStatus = 'loading';

		},
		components: {},
		computed: {
			repairTabs() {
				return [{
						name: this.$t('project.negotiate')
					},
					{
						name: this.$t('project.implement')
					}
				]
			}
		},
		methods: {
			async getList(isBefore,lastQuery) {
					console.log(lastQuery)
				if(this.current == 1){
					// 根据current  来 区分获取哪个页面的数据
					let {
						idx,
						size,
					} = this.query;

					//首先判断网络环境 如果没有网取本地store 如果有网则从后端获取
					//获取当前网络状况
					let networkType = await this.getNetWork();
					if (networkType == 'none') {
						//如果 是断网的情况下获取store 里面的数据放入LISTS				
						if(this.lists && this.lists.length == 0){
							let data = await this.getLocalCacheList();
							this.lists = data
						}else{
							return
						}
					}else{
						//分开两个LIST 使页面可以在不刷新的情况下显示数据
						this.$http.get('/client/biz/project/list', this.query).then(res => {
							if(res.length == 0){
								this.loadStatus = 'nomore'
								return
							}
							if(lastQuery != undefined && lastQuery.topTime == res[0].AddTime){
								this.query= JSON.parse(JSON.stringify(lastQuery)) 
								this.loadStatus = 'nomore'
								return
							}else{
								this.lists=[];
							}
							if(this.query.idx == 1 && this.query.topTime == 0){
								this.query.topTime = res[0].AddTime
							}
							if (res.length > 0) {
								let oldMessageTime = 0;
								//如果新的res小于SIZE说明后面没有值了关闭刷新 每次都把RES添加到LISTS里面
								this.query.idx = res.length < size ? idx : idx + 1;
								this.loadStatus = res.length < size ? 'nomore' : 'loading';
								this.lists = [...this.lists,...res]
								this.lists.forEach((item, index) => {
									this.getPermissionPrice(item.Pid, index)
									this.getPermissionContract(item.Pid, index)
								})
								if (this.lists.length) {
									//向本地存储里面存一个LIST值
									this.saveLocalCacheTopic(this.lists, isBefore,this.query.clientRepairType);
								}
							}
						})
					}
				}else{
					// 根据current  来 区分获取哪个页面的数据
					let {
						idx,
						size,
					} = this.query2;

					//首先判断网络环境 如果没有网取本地store 如果有网则从后端获取
					//获取当前网络状况
					let networkType = await this.getNetWork();
					if (networkType == 'none') {
						//如果 是断网的情况下获取store 里面的数据放入LISTS
						if(this.lists2 && this.lists2.length == 0){
							let data = await this.getLocalCacheList();
							this.lists2 = data
						}else{
							return
						}
						
						console.log(data)
					}else{
					
						//分开两个LIST 使页面可以在不刷新的情况下显示数据
						this.$http.get('/client/biz/project/list', this.query2).then(res => {
							if(res.length ==0 ){
								this.loadStatus2 = 'nomore'
								return
							}
							if(lastQuery != undefined && lastQuery.topTime == res[0].AddTime){
								this.query2 =JSON.parse(JSON.stringify(lastQuery)) 
								this.loadStatus2 ='nomore'
								return
							}else{
								this.lists2=[];
							}
							//如果第一页
							if(this.query2.idx == 1 && this.query2.topTime == 0){
								this.query2.topTime = res[0].AddTime
							}
							if (res.length > 0) {
								let oldMessageTime = 0;
								//如果新的res小于SIZE说明后面没有值了关闭刷新 每次都把RES添加到LISTS里面
								this.query2.idx = res.length < size ? idx : idx + 1;
								this.loadStatus2 = res.length < size ? 'nomore' : 'loading';
								this.lists2 = [...this.lists2,...res]
								this.lists2.forEach((item, index) => {
									this.getPermissionPrice(item.Pid, index)
									this.getPermissionContract(item.Pid, index)
								})
								if (this.lists2.length) {
									//向本地存储里面存一个LIST值
									this.saveLocalCacheTopic(this.lists2, isBefore,this.query2.clientRepairType);
								}
							}
						})
					}
				}			
			},
			//封装一个异步返回方法用来判断是否有网络
			getNetWork(){
				return new Promise((resolve,reject)=>{
					const start = Date.now()
					let net = ''
						uni.getNetworkType({
							success: function(res) {
								net = res.networkType
							},
						});
					resolve(net)
				})
			},
			async getLocalCacheList() {
				let data = await this.getStorageTopic();
				return data;
			},
			async getStorageTopic() {
				let res = await homeStorage.getDataNew({
					key: 'client_project_list_' + (this.current == 1 ? this.query.clientRepairType : this.query2.clientRepairType ),
				});
				return res;
			},
			async saveLocalCacheTopic(data, isBefore,clientRepairType) {
				// let now = Date.now()
				// console.log("fffffffff",now)
				// let next = Date.now()
				// console.log("fffffffff",next)
				// setTimeout(()=>{
				// 	let res =  homeStorage.getData({
				// 		key: 'client_project_list_' +clientRepairType,
				// 		page:  0,
				// 		sequence: 0,
				// 		isBefore: true,
				// 	});
				// 	console.log("ffffffffffffffffff",res)
				// },3000)
				homeStorage.insertNew([...data], isBefore, 'client_project_list_' + clientRepairType, false)	
				
	
				// return res;
				
			},
			getPermissionPrice(proj, index) {
				this.$http.get('/client/biz/project/item/permission/price', {
					project: proj
				}).then(res => {
					this.lists[index].PermissionPrice = res;
					// console.log('是否有报价权限', res)
				});
			},
			getPermissionContract(proj, index) {
				let that = this;
				this.$http.get('/client/biz/project/item/permission/contract', {
					project: proj
				}).then(res => {
					this.lists[index].PermissionContract = res;
				});
			},
			downGetList() {
				if( this.current == 1 ? this.loadStatus=='nomore' : this.loadStatus2=='nomore'  ) return;
				this.getList(false);
			},
			repairTabChange(index) {
				this.current = index;
				//切换页面应该与 下拉刷新同理 如果没有新数据的话继续显示旧数据如果有新数据的话从0开始获取新数据
				let lastQuery = ''
				// if (!this.isTriggered) {
				// 	this.isTriggered = true
				// 	setTimeout(() => {
				// 		this.isTriggered = false
				// 	}, 2000)
				// }
				if(this.current == 1 ){
					//重新生成一个对象防止传址问题
					lastQuery =JSON.parse( JSON.stringify( this.query)) 
					this.query.idx = 1;
					this.loadStatus = 'loading';
					this.query.topTime = 0;
				}else{ 
					lastQuery = JSON.parse( JSON.stringify( this.query2)) 
					console.log(lastQuery)
					this.query2.idx = 1;
					this.loadStatus2 = 'loading';
					this.query2.topTime = 0;
				}
				this.getList(true,lastQuery);	

				// if(this.current == 1 ? this.lists && this.lists.length > 0 :this.lists2 && this.lists2.length > 0 ){
				// 	return
				// }
				// this.getList(true)
			},
			goRepairDetail(item) {
				console.log('调走了？', item);
				this.$goPage('/client/repair/detail', {
					project: item.Pid,
					discount: item.Discount
				})
			},
			topGetList(){
				let lastQuery = ''
				if (!this.isTriggered) {
					this.isTriggered = true
					setTimeout(() => {
						this.isTriggered = false
					}, 2000)
				}
				if(this.current == 1 ){
					//重新生成一个对象防止传址问题
					lastQuery =JSON.parse( JSON.stringify( this.query)) 
					this.query.idx = 1;
					this.loadStatus = 'loading';
					this.query.topTime = 0;
				}else{ 
					console.log(lastQuery)
					lastQuery = JSON.parse( JSON.stringify( this.query2)) 
					this.query2.idx = 1;
					this.loadStatus2 = 'loading';
					this.query2.topTime = 0;
		
				}
				this.getList(true,lastQuery);	
			},
		},
	}
</script>

<style lang="scss" scoped>
	.repair-tabs {
		width: 100%;
		line-height: 100rpx;
		margin: 0 auto;
		padding: 90rpx 0 0 0;
		background-color: #f1f1f1;
		border-bottom: 1px solid #dde0e9;
		margin-bottom: 10rpx;
		position: absolute;
		top:0;
		left: 0;
    z-index: 1;
	}

	.tab-content {
		width: 100%;
		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #000000;
		background-color: transparent;
		padding-left: 30rpx;
		margin-top: 10rpx;
	}
  .repair-content {
		position: absolute;
		top:200rpx;
		left:0;
		width:100%;
	}
	.repair {
		position: relative;
		white-space: normal;
		word-break: break-all;
		&-list {
			width: 100%;
			height: 100vh;
		
		}
	}

	.repair-item {
	  width: 100%;
		padding: 36rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		&_cell {
			
			&+& {
				margin-top: 24rpx;
			}

			&--label {
				color: #666666;
			}

			&--value {
				color: #000000;
			}

			&--state {
				position: relative;
				right: -30rpx;
				height: 58rpx;
				line-height: 58rpx;
				padding: 0 14rpx;
				font-size: 28rpx;
				color: #5E6D82;
				background-color: #ECF8FF;

				.icon {
					margin-right: 6rpx;
				}
			}

			&--state:before {
				content: '';
				position: absolute;
				left: -20rpx;
				top: 0;
				width: 0;
				height: 0;
				border-top: 29rpx solid transparent;
				border-bottom: 29rpx solid transparent;
				border-right: 29rpx solid #ECF8FF;

			}
		}
	}
	.empty-view {
	  position: fixed;
		top: -200rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>